<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
    <title>个人订单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<style>

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .box{
        width: 500px;
    }
    .box ul{
        list-style: none;
    }

    .box ul li{
        position: relative;
        float: left;
        width: 50px;
        height: 42px;
        line-height: 42px;
        margin-left: 10px;
    }
    .box ul li div{
        position: absolute;
        display: block;
        width: 44px;
        height: 42px;
    }
    .box ul li .star0{
        /* background-color: rebeccapurple; */
        background-size: 44px 42px;
        background-image: url('./img/shoucang.png');
    }
    .box ul li .star1{
        background-size: 44px 42px;
        background-image: url('./img/shou.png');
    }
</style>
<%
    if (request.getAttribute("myorder")==null||request.getAttribute("myorder")==""){
        response.sendRedirect(request.getContextPath() +"/myOrderServlet");
    }
%>
<script>
    function goumi(){
        location.href="${pageContext.request.contextPath}/userListServlet"
    }
    var comment="";
    var userid=""
    var purMid=""
    var thisname=""
    //将本地图片转化为base64格式
    function fileChange(files){
        //创建文件读取对象
        const reader = new FileReader();
        //文件按照该格式进行读取(格式可按照需求写)
        reader.readAsDataURL(files[0], `utf-8`);
        // 读取完文件之后会回来这里
        reader.onload = (file) => {
            // 读取文件内容
            const image = file.target.result;

            //设置图片预览
            document.getElementById("onload_image").setAttribute("src", image);
            //将解析图片存至隐藏文本域内
            document.getElementById("image").innerText = image;
        }
    }
    function kaiqi(commentId,id,purid){
        comment=commentId
        userid=id
        purMid=purid
    }
    function quxiaol(){
        document.getElementById("onload_image").setAttribute("src", "");
        document.getElementById("image").innerText = ""
        document.getElementById("message-text").value=""
        document.getElementById("recipient-name").value=""
    }

    function tupian(){
        var tup= document.getElementById("image").innerText;
        var text=document.getElementById("message-text").value;
        var xin=$('.box').data('xin');
        $.post("${pageContext.request.contextPath}/updatecommentsServlet",{tup:tup,text:text,comment:comment,userid:userid,purMid:purMid,xin:xin},function (date){
            console.log(date)
            if (date=="true"){
                if (confirm("评论成功")){

                    $('#exampleModal').modal('hide')
                    var property=document.getElementById(purMid);
                    property.style.backgroundColor="#999"
                    property.innerText="已评论"
                    document.getElementById("onload_image").setAttribute("src", "");
                    document.getElementById("image").innerText = ""
                    document.getElementById("message-text").value=""
                    document.getElementById("recipient-name").value=""
                }else {
                    $('#exampleModal').modal('hide')
                    var property=document.getElementById(purMid);
                    property.style.backgroundColor="#999"
                    property.innerText="已评论"
                    document.getElementById("onload_image").setAttribute("src", "");
                    document.getElementById("image").innerText = ""
                    document.getElementById("message-text").value=""
                    document.getElementById("recipient-name").value=""
                }
            }else {
                quxiaol()
                alert("评论失败")
            }
        })

    }
</script>
<body style="margin-top: 20px;min-height: 800px;">

<div class="col-lg-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">我的订单</h4>
            <p class="card-description">
                够买有优惠
            </p>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>
                            商品图片
                        </th>
                        <th style="text-align: center">
                            购买时间
                        </th>
                        <th style="text-align: center">
                            预计送达时间
                        </th>
                        <th style="text-align: center">
                            购买数量
                        </th>
                        <th style="text-align: center">
                            实际支付
                        </th>
                        <th style="text-align: center">
                            商品规格
                        </th>
                        <th style="text-align: center">
                            收货地址
                        </th>
                        <th style="text-align: center">
                            评论
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${requestScope.myorder}"  var="pur" varStatus="s">
                    <tr style="margin-top: 10px">
                        <td class="py-1">
                            <img style="width: 80px" src="${pur.home}" alt="image">
                        </td>
                        <td id="shi" style="line-height: 60px;text-align: center">
                            <fmt:formatDate value="${pur.current}" pattern="yyyy-MM-dd"/>
                        </td>
                        <td id="jian" style="line-height: 60px;text-align: center">
                            <fmt:formatDate value="${pur.current_dat}" pattern="yyyy-MM-dd"/>
                        </td>
                        <td style="line-height: 60px;text-align: center">
                            ${pur.number}
                        </td>
                        <td style="line-height: 60px;text-align: center">
                            <span style="color: red;font-weight: bold">$${pur.pur_price}</span>
                        </td>
                        <td style="line-height: 60px;text-align: center">
                            ${pur.specs}
                        </td>
                        <td style="line-height: 60px;text-align: center">
                            ${pur.address}
                        </td>
                        <td style="line-height: 60px;text-align: center">
                            <c:if test="${pur.comment=='N'}">
                                <div id="${pur.id}" onclick="kaiqi(${pur.comment_id},${sessionScope.usersList.id},id)" style="width: 80px;height: 40px;background-color: #02aaf1;color: #fff;line-height: 40px;cursor: pointer;margin-top: 13px" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">评论</div>
                            </c:if>
                            <c:if test="${pur.comment=='Y'}">
                                <div style="width: 80px;height: 40px;background-color: #999;color: #fff;line-height: 40px;cursor: pointer;margin-top: 13px">已评论</div>
                            </c:if>
                        </td>

                    </tr>
                    </c:forEach>

                    </tbody>
                </table>
            </div>
        </div>

        <%--发送评论--%>
        <div class="modal fade" id="exampleModal"  tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">用户评论</h5>
                        <button onclick="quxiaol()" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form class="form-upload" id="formUpload" action="" method="post">
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">上传图片</label>
                                <input type="file" class="form-control" accept=".jpg,.jpeg,.png" id="recipient-name" onchange="fileChange(this.files)">
                            </div>
                            <img style="width: 100px;height: 100px" src = "" alt = "无法加载" id="onload_image">
                            <textarea hidden name="image"id="image"></textarea>
                            <div style="width: 100%;margin-top: 15px">描述相符</div>

                            <div class="box" data-xin="0">
                                <ul>
                                    <li>
                                        <div class="star1"></div>
                                        <div class="star0"></div>
                                    </li>
                                    <li>
                                        <div class="star1"></div>
                                        <div class="star0"></div>
                                    </li>
                                    <li>
                                        <div class="star1"></div>
                                        <div class="star0"></div>
                                    </li>
                                    <li>
                                        <div class="star1"></div>
                                        <div class="star0"></div>
                                    </li>
                                    <li>
                                        <div class="star1"></div>
                                        <div class="star0"></div>
                                    </li>
                                    <li class="text">非常差</li>
                                </ul>
                            </div>

                            <div class="form-group" style="margin-top: 70px">
                                <label for="message-text" class="col-form-label">评论内容</label>
                                <textarea class="form-control" id="message-text"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="quxiaol()" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" onclick="tupian()" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>
</body>
<script>
    $(".box ul li").click(function(){
        // 打分程度
        var pingfen=$(this).index()+1
        //存值
        $('.box').data('xin',pingfen)
        var txt = ['非常差','差','一般','好','非常好'];
        $(this).find(".star0").css("display","none");
        $(this).prevAll().find(".star0").css("display","none");
        $(this).nextAll().find(".star0").css("display","block");
        $(".box ul .text").html(txt[$(this).index()]);
    })
</script>
</html>
